<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
	<title>MOIM</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
	<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
	
	<link rel="stylesheet" href="resources/style.css" />
	
<script type="text/javascript">

var center;
var centery;
var centerx;
$(function() {
	centery = $(window).height()/2;
	centerx = $(window).width()/2;
	
	var array = $(".profile div");
	var n = array.length;
	for(var i=0; i < n; i++) {
		$(array[i]).css({
			left:centerx,
			top:centery
		});
	}
	center = $(".center");
	$(center).css({
		left:centerx - center.width()/2,
		top:centery - center.height()/2
	});
	reloc2();
	
	$(".profile").trigger('create');
	
	var array = $(".imgs div");
	var n = array.length;
	for(var i = 0 ; i < n ; i ++)
		draggable2(array[i],".center");
	dropable2(".center");
});

function draggable2(target, toDrop) {
	
	var check = false;
	$(target)
	.drag("start",function( ev, dd ){
		})
	.drag(function( ev, dd ){
		if(check == false) {
			$( this ).css({
				top: dd.offsetY,
				left: dd.offsetX
			}); 
		}
	}, { drop: toDrop })
	.drag('end', function (ev, dd) {
		if( check == false && $(dd.drop).attr('class') != $(dd.available).attr('class')) {
			$( this ).animate({
				top: dd.originalY,
				left: dd.originalX
			}, 10 );
		} else {
			console.log("no revert");
			check = true;
			return;
		}
	
	}); //drag
}
function draggstop(target) {
	
}
function dropable2(toDrop) {

	$(toDrop)
	.drop('start', function(ev, dd) {
		$(this).addClass("active");
	})
	.drop(function (ev, dd) {
		console.log("dropped");
		console.log($(dd.drag));

		$(dd.target).append(dd.drag);
		
		reloc2();
		reloc22();
	})
	.drop('end', function(ev, dd) {
		$(this).removeClass("active");
	});
}

$.drop({ mode:"middle" });

function reloc2() {
	var array = $(".imgs div");
	var n = array.length;
	var r = centerx*7/10;
	var angle = 360/n;
	
	for(var i=0; i < n; i++) {
		var x = centerx + Math.sin(Math.PI/180 * angle * i) * r;
		var y = centery - Math.cos(Math.PI/180 * angle * i) * r;
		$(array[i]).animate({
			left:x - $(array[i]).width()/2,
			top:y - $(array[i]).height()/2
		});
	}
}
function reloc22() {
	var array = $(".center div");
	var n = array.length;
	var r = centerx*2/10;
	var angle = 360/n;
	
	for(var i=0; i < n; i++) {
		$(array[i]).css({
			left:center.width()/2 - $(array[i]).width()/2,
			top:center.height()/2 - $(array[i]).height()/2
		});
		
		var x = Math.sin(Math.PI/180 * angle * i) * r;
		var y = Math.cos(Math.PI/180 * angle * i) * r;
		$(array[i]).animate({
			left:x + center.width()/2 - $(array[i]).width()/2,
			top:y + center.height()/2 - $(array[i]).height()/2
		}, 100);
	}
}

</script>
	
<style type="text/css">
.imgs div { position:absolute; }
.center { position:absolute; 
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    border:1px solid #8BB;
	}
.center div { position:absolute; }
.active {
	background-color: #BEE;
	border-color: #8BB;
	}

</style>
</head>
<body>

<div data-role="page" class="moim">
<div data-role="header" data-theme="z">
	<a href="main.jsp" data-role="button" data-icon="home" data-iconpos="notext">&nbsp;</a>
	<h2>MOIM</h2>
	<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
		<a href="board.jsp" data-role="button" data-icon="star" style="display:none">게시판</a>
		<a href="square.jsp" data-role="button" data-icon="star">광장</a>
	</div>
</div>
<div data-role="content">

	<div id=container>
	
		<div class="profile">
			<div class="imgs">
				<div><img src="img/profile-sample.jpg"></div>
				<div><img src="img/profile-sample.jpg"></div>
				<div><img src="img/profile-sample.jpg"></div>
				<div><img src="img/profile-sample.jpg"></div>
				<div><img src="img/profile-sample.jpg"></div>
				<div><img src="img/profile-sample.jpg"></div>	
			</div>
			
			<div class="center">
				<!-- <img src="img/profile-sample.jpg" style="width:100px; height:100px;"/> -->
			</div>
			
		</div>
		
		
	</div>
</div>
</div>


</body>
</html>